<template>
  <section class="post_detail_baseInfo">
    <h3 class="post_detail_baseInfo__title">基础信息</h3>
    <div class="post_detail_baseInfo__content">
      <div class="post_detail_baseInfo__item" v-for="item in baseInfoList" :key="item.key">
        <span class="post_detail_baseInfo__item_name">{{item.name}}：</span>
        <span
          class="post_detail_baseInfo__item_value"
        >{{baseInfo && baseInfo[item.key] ? baseInfo[item.key] : '-'}}</span>
      </div>
    </div>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "postDetailBaseInfo",
  data() {
    return {
      baseInfoList: [
        {
          name: "部门名称",
          key: "name"
        },
        {
          name: "部门代码",
          key: "code"
        },
        {
          name: "岗位状态",
          key: "status"
        },
        {
          name: "岗位人数",
          key: "Num"
        },
        {
          name: "岗位说明",
          key: "explain"
        }
      ]
    };
  },
   computed: {
    ...mapGetters({
      baseInfo: "postDetail/baseInfo"
    })
  },
};
</script>
<style scoped>
.post_detail_baseInfo {
  border-top: 2px solid rgba(135, 163, 255, 1);
  background: rgba(242, 245, 253, 1);
  padding: 16px;
}
.post_detail_baseInfo__content {
  overflow: hidden;
}
.post_detail_baseInfo__title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  border-left: 3px solid #3f6bff;
  padding-left: 6px;
  line-height: 16px;
  margin-bottom: 16px;
}
.post_detail_baseInfo__item {
  width: 33.333333%;
  float: left;
  font-size: 14px;
  margin-bottom: 16px;
}
.post_detail_baseInfo__item_name {
  color: #666666;
}
.post_detail_baseInfo__item_value {
  color: #333333;
  margin-left: 5px;
}
</style>
